<template>

  <!---搜索表单-->
  <div class="search-div">
    <el-form label-width="80px" size="small">
      <el-row >
        <el-col :span="8">
          <el-form-item label="订单号">
            <el-input v-model="queryDto.orderNo"
                      style="width: 100%"
                      placeholder="订单号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="订单状态">
            <el-select
              class="m-2"
              placeholder="订单状态"
              size="small"
              style="width: 100%"
              v-model="queryDto.orderStatus"
            >
              <el-option
                v-for="item in orderStatusList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="创建时间">
            <el-date-picker v-model="createTimes"
                            type="daterange"
                            range-separator="To"
                            start-placeholder="开始时间"
                            end-placeholder="结束时间"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="收货人姓名">
            <el-input v-model="queryDto.receiverName"
                      style="width: 100%"
                      placeholder="收货人姓名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货人手机">
            <el-input v-model="queryDto.receiverPhone"
                      style="width: 100%"
                      placeholder="收货人手机"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="支付方式">
            <el-select
              class="m-2"
              placeholder="支付方式"
              size="small"
              style="width: 100%"
              v-model="queryDto.payType"
            >
              <el-option
                v-for="item in payTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="display:flex">
        <el-button type="primary" size="small" @click="searchOrderInfo">
          搜索
        </el-button>
        <el-button size="small" @click="resetData">重置</el-button>
      </el-row>
    </el-form>
  </div>

  <!---数据表格-->
  <el-table :data="list" style="width: 100%">
    <el-table-column prop="orderNo" label="订单号" />
    <el-table-column prop="totalAmount" label="订单总额" />
    <el-table-column prop="payType" label="支付方式" #default="scope">
      {{ scope.row.payType === 1 ? "微信" : "支付宝" }}
    </el-table-column>
    <el-table-column prop="orderStatus" label="订单状态" #default="scope">
      {{ scope.row.orderStatus === 0 ? "待付款" : (scope.row.orderStatus === 1 ? "待发货" : (scope.row.orderStatus === 2 ? "已发货" : (scope.row.orderStatus === 3 ? "已完成" : "已取消"))) }}
    </el-table-column>
    <el-table-column prop="receiverName" label="收货人姓名" />
    <el-table-column prop="receiverPhone" label="收货人电话" />
    <el-table-column prop="receiverAddress" label="详细地址" width="180"/>
    <el-table-column prop="createTime" label="创建时间" width="180"/>
    <el-table-column label="操作" align="center" width="100" #default='scope'>
            <el-button type="primary" size="small" @click="details(scope.row)">
                详情
            </el-button>
    </el-table-column>
  </el-table>

  <!-- 订单详情窗 -->
  <el-dialog v-model="dialogVisible" title="订单详情" width="50%">
    <el-divider />
      <el-form label-width="120px">
        <el-form-item label="订单基本信息"/>
        <el-row>
          <el-col :span="10">
            <el-form-item label="订单号 ">
              <div class="center">{{orderList.orderNo}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="订单总额 ">
              <div class="center">{{orderList.totalAmount}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="优惠券 ">
              <div class="center">{{orderList.couponAmount}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="原价金额 ">
              <div class="center">{{orderList.originalTotalAmount}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="运费 ">
              <div class="center">{{orderList.feightFee}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="支付方式 ">
              <div class="center">{{orderList.payType}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="订单状态 ">
              <div class="center">{{orderList.orderStatus}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="下单时间 ">
              <div class="center">{{orderList.createTime}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="支付时间 ">
              <div class="center">{{orderList.paymentTime}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="订单备注 ">
              <div class="center">{{orderList.remark}}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    <el-divider />
      <el-form label-width="120px">
        <el-form-item label="订单基本信息"/>
        <el-row>
          <el-col :span="10">
            <el-form-item label="收货人姓名 ">
              <div class="center">{{orderList.receiverName}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="收货人电话 ">
              <div class="center">{{orderList.receiverPhone}}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10">
            <el-form-item label="地址标签 ">
              <div class="center">{{orderList.receiverTagName}}</div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="收货详细地址 ">
              <div class="center">{{orderList.receiverAddress}}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    <el-divider />
      <div>&emsp;&nbsp;订单详情</div>
      <el-table :data="orderItem" style="width: 100%">
        <el-table-column prop="skuName" label="SKU名称" />
        <el-table-column prop="thumbImg" label="SKU图片" #default="scope">
          <img :src="scope.row.thumbImg" width="50"/>
        </el-table-column>
        <el-table-column prop="skuPrice" label="SKU价格" />
        <el-table-column prop="skuNum" label="购买数量" />
      </el-table>
  </el-dialog> 

  <el-pagination
    v-model:current-page="pageParams.page"
    v-model:page-size="pageParams.limit"
    :page-sizes="[5, 10, 20, 50]"
    @size-change="fetchData"
    @current-change="fetchData"
    layout="total, sizes, prev, pager, next"
    :total="total"
  />

</template>

<script setup>
import { ref, onMounted } from "vue";
import { getPageList, getOrderInfo } from "@/api/orderInfo";

//详情
const dialogVisible = ref(false)

const form = {
  orderNo: "",
  totalAmount: "",
  couponAmount: "",
  originalTotalAmount: "",
  feightFee: "",
  payType: "",
  orderStatus: "",
  createTime: '',
  paymentTime: "",
  remark: "",

  receiverName: "",
  receiverPhone: "",
  receiverTagName: "",
  receiverAddress: "",

  orderItemList:[{skuName: "", thumbImg: "", skuPrice: "", skuNum:""}]
}

const orderList = ref(form)
const orderItem = ref([])

const pageForm = {
  orderNo: "",
  totalAmount: "",
  payType: "",
  orderStatus: "",
  receiverName: "",
  receiverPhone: "",
  receiverAddress: "",
  createTimeBegin: '',
}

const orderInfo = ref(pageForm)

const details = async (row) => {
  orderInfo.value = {...row}
  const { data } = await getOrderInfo(orderInfo.value.orderNo)
  orderList.value = data.list[0]
  orderItem.value = orderList.value.orderItemList
  if (orderList.value.payType == 2) {
    orderList.value.payType = "支付宝"
  } else {
    orderList.value.payType = "微信"
  }

  if (orderList.value.orderStatus == 0) {
    orderList.value.orderStatus = "待付款"
  }
  else if (orderList.value.orderStatus == 1) {
    orderList.value.orderStatus = "待发货"
  }
  else if (orderList.value.orderStatus == 2) {
    orderList.value.orderStatus = "已发货"
  }
  else if (orderList.value.orderStatus == 3) {
    orderList.value.orderStatus = "完成"
  }
  else if (orderList.value.orderStatus == -1) {
    orderList.value.orderStatus = "已取消"
  }

  console.log(orderList.value)
  dialogVisible.value = true
}

// 表格数据模型
const list = ref([]);

// 分页条数据模型
const total = ref(0);

// 定义搜索表单数据模型
const queryDto = ref({
  orderNo: '',
  orderStatus: '',
  receiverName: '',
  receiverPhone: '',
  payType: '',
  createTimeBegin: '',
  createTimeEnd: '',
});
const orderStatusList = ref([
  { id: 0, name: '待付款' },
  { id: 1, name: '待发货' },
  { id: 2, name: '已发货' },
  { id: 3, name: '完成' },
  { id: -1, name: '已取消' },
]);
const payTypeList = ref([
  { id: 0, name: '支付宝' },
  { id: 1, name: '微信' },
]);
const createTimes = ref([]);

//分页数据
const pageParamsForm = {
  page: 1, // 页码
  limit: 5 // 每页记录数
};
const pageParams = ref(pageParamsForm);

// onMounted钩子函数
onMounted(() => {
  fetchData();
});

// 搜素按钮点击事件处理函数
const searchOrderInfo = () => {
  fetchData();
};

// 重置按钮点击事件处理函数
const resetData = () => {
  queryDto.value = {};
  createTimes.value = [];
  fetchData();
};

// 定义分页查询方法
const fetchData = async () => {
  if (createTimes.value.length == 2) {
    queryDto.value.createTimeBegin = createTimes.value[0];
    queryDto.value.createTimeEnd = createTimes.value[1];
  }
  // 请求后端接口进行分页查询
  const {
    code,
    message,
    data
  } = await getPageList(pageParams.value.page, pageParams.value.limit, queryDto.value);
  list.value = data.list;
  total.value = data.total;
};
</script>

<style scoped>
.search-div {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.tools-div {
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 3px;
  background-color: #fff;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.center {
  text-align: center;
}
</style>